<template>
  <div id="project-info">
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-size: 18px;font-weight: bolder">项目信息</span>
      </div>
      <el-table
        id="project_table"
        header-cell-class-name="projectHeadRow"
        cell-class-name="projectInfoRow"
        :data="projectData"
        border
      >
        <template v-for="proHeader in projectHeaders">
          <el-table-column
            v-if="!proHeader.isHidden"
            :key="proHeader.prop"
            :prop="proHeader.prop"
            :label="proHeader.label"
            :width="proHeader.width"
          >
            <template slot-scope="scope">
              <span v-if="proHeader.isPass">
                {{
                  scope.row[proHeader.prop] === undefined || scope.row[proHeader.prop] === null ? '' : '●'.repeat(scope.row[proHeader.prop].length || 0)
                }}
              </span>
              <span v-else>
                {{ scope.row[proHeader.prop] }}
              </span>
              <span v-if="proHeader.isStatus">
                <el-tooltip
                  effect="dark"
                  :content="dynamicNetStatus(scope.row, projectStatus).statusTip"
                  placement="top-start"
                >
                  <i class="iconfont" :class="dynamicNetStatus(scope.row, projectStatus).iconSrc" />
                </el-tooltip>
              </span>
              <div v-if="proHeader.isOp">
                <el-button
                  type="text"
                  size="mini"
                  @click="editProjectEnv"
                >
                  <i class="iconfont icon-list" />
                  环境
                </el-button>
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  @click="editProjectInfo(scope.row)"
                > 编辑
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  :disabled="dynamicNetStatus(scope.row, projectStatus).isAlive"
                  @click="reconnect(scope.row)"
                >
                  <i class="iconfont icon-shebeizhonglian" />
                  重连
                </el-button>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-card>
    <el-dialog
      v-draggable
      title="项目信息"
      :visible.sync="projectVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <ProjectEdit
        :project-info="projectInfoRow"
        @cancel-edit="handleCancel"
        @submit-edit="handleSubmit"
      />
    </el-dialog>
    <el-dialog
      v-draggable
      title="环境信息"
      :visible.sync="envVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <ProjectEnvInfo parent-body="proInfo" @pro-env-submit="envSubmit" />
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import ProjectEdit from './ProjectEdit.vue'
import ProjectEnvInfo from './ProjectEnvInfo.vue'
import { projectStatus } from '@/utils/utils'
import { getProjectInfo, reconnectProject } from '@/api/project'

export default {
  name: 'ProjectInfo',
  components: { ProjectEnvInfo, ProjectEdit },
  data() {
    return {
      projectInfo: {},
      // 项目表头
      projectHeaders: [{
        prop: 'projectId',
        label: '项目ID',
        isHidden: true
      }, {
        prop: 'projectName',
        label: '项目名称'
      }, {
        prop: 'projectRootDir',
        label: '项目编译根目录'
      }, {
        prop: 'sshHost',
        label: '主机IP'
      }, {
        prop: 'sshPort',
        label: '端口号'
      }, {
        prop: 'sshUsername',
        label: '用户名'
      }, {
        prop: 'sshPassword',
        label: '密码',
        isPass: true
      }, {
        prop: 'isNeedVpn',
        label: '是否需要VPN'
      }, {
        prop: 'vpnConfigPah',
        label: 'VPN配置文件路径'
      }, {
        prop: 'status',
        label: '环境状态',
        isStatus: true,
        width: '80px'
      }, {
        prop: 'operation',
        label: '操作',
        isOp: true,
        width: '180px'
      }],
      projectData: [],
      projectVisible: false,
      envVisible: false,
      projectId: '',
      projectInfoRow: {},
      envInfos: []
    }
  },
  computed: {
    ...mapGetters([
      'projectStatus'
    ])
  },
  async mounted() {
    // 获取项目信息
    await this.flushTblData()
  },
  methods: {
    // 初始化表格数据
    initTblData() {
      this.projectId = this.projectInfo.projectId
      const cpProInfo = { ...this.projectInfo }
      cpProInfo.isNeedVpn = this.projectInfo.isNeedVpn === '1' ? '是' : '否'
      this.projectData = [{
        ...cpProInfo
      }]
      this.projectData.forEach(item => {
        item['envInfo'] = this.envInfos
      })
    },
    dynamicNetStatus(row, stateProStatus) {
      const isConnAlive = projectStatus(row.projectId, stateProStatus)
      return {
        isAlive: isConnAlive,
        iconSrc: isConnAlive ? 'icon-wangluozhengchang' : 'icon-wangluoyichang',
        statusTip: isConnAlive ? '网络连接成功' : '网络连接异常'
      }
    },
    // 编辑项目信息
    editProjectInfo(tblRow) {
      this.projectVisible = true
      this.projectInfoRow = { ...tblRow }
      this.projectInfoRow.isNeedVpn = this.projectInfoRow.isNeedVpn === '是' ? '1' : '0'
    },
    // 环境信息
    editProjectEnv() {
      this.envVisible = true
    },
    // 项目环境重连
    reconnect(tblRow) {
      reconnectProject({ projectId: tblRow.projectId }).then(res => {
        this.$message.success('项目重连成功，网络状态刷新中...')
      }).catch(err => {
        console.error(err)
        this.$message.error('项目重连失败，未知错误，请联系运维人员！')
      })
    },
    handleCancel(val) {
      this.projectVisible = val
    },
    async handleSubmit() {
      await this.flushTblData()
      this.projectVisible = false
      await this.$store.dispatch('project/changeDynamicMenus')
      location.reload()
    },
    async envSubmit() {
      this.envVisible = false
    },

    async flushTblData() {
      const proRes = await getProjectInfo({ projectId: this.$route.meta.projectId })
      if (!proRes.data) {
        this.$message.error('获取项目信息失败!')
        return
      }
      this.projectInfo = proRes.data
      this.initTblData()
    }
  }
}
</script>

<style>
#project_table .projectHeadRow {
  background-color: #91AAEF;
  color: #FFF;
  text-align: center;
}

#project_table .projectInfoRow {
  text-align: center;
  font-size: 14px;
}

.icon-wangluozhengchang {
  color: #00ff33;
}

.icon-wangluoyichang {
  color: #FF7272;
  font-size: 20px;
}
</style>
